<template>
  <div class="app-container documentation-container">
    <div class="top">
      <div class="add_zhandian">
        <!--<el-button type="primary" icon="el-icon-plus" @click.native="addsite">新增出库单</el-button>-->
      </div>
      <div class="selech">
        <el-form :inline="true" class="demo-form-inline">
          <!--<el-form-item label="搜索类型">-->
          <!--<el-select v-model="value" placeholder="请选择">-->
          <!--<el-option-->
          <!--v-for="item in options"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item label="">
            <el-input v-model="content" placeholder="请输入出库单号" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%;margin-top:30px;"
    >
      <el-table-column align="center" label="状态" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.batch.pname }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="num"
        label="出库单号"
        width="150"
      />
      <el-table-column
        prop="number"
        label="出库数量"
        width="110"
      />
      <el-table-column
        prop="remark"
        label="出库备注"
        width="110"
      />

      <el-table-column
        prop="created_at"
        label="创建时间"
        width="180"
      />
      <el-table-column align="center" label="操作" width="320">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="handleEdit(scope)">编辑查看</el-button>
          <el-button v-if="scope.row.status == 1" type="warning" size="small" @click="handfreezing(scope)">停用</el-button>
          <el-button v-if="scope.row.status == 2" type="primary" size="small" @click="handfreezing(scope)">启用</el-button>
          <el-button type="danger" size="small" @click="deletegoods(scope.$index, tableData,scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="pagesize"
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="提示"
      :visible.sync="deletegoodsflag"
      width="30%"
    >
      <span>此操作会永久删除该出库单，您想好了嘛？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletegoodsflag = false">取 消</el-button>
        <el-button type="primary" @click="DetermineGoods">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增出库单" width="80%" :visible.sync="chukuflag">
      <el-form
        ref="ruleForm"
        :label-position="labelPosition"
        :rules="chukurules"
        label-width="120px"
        :model="formchuku"
      >
        <el-form-item label="出库单号" prop="num">
          <el-input v-model="formchuku.num" />
        </el-form-item>
        <el-form-item type="number" label="出库数量" prop="number">
          <el-input v-model="formchuku.number" />
        </el-form-item>
        <el-form-item label="出库备注" prop="remark">
          <el-input v-model="formchuku.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chukuflag = false">取 消</el-button>
        <el-button type="primary" @click="Addchuku('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      // 编辑
      chukuflag: false,
      chukuarrid: {}, // 出库Object
      chukuflag: false,
      chukurules: {
        pid: [
          { required: true, message: '请选择批次', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入出库单号', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入出库数量', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入出库备注', trigger: 'blur' }
        ]
      },
      formchuku: {
        bid: '',
        num: '',
        number: '',
        remark: ''
      },
      labelPosition: 'right',

      piciflag: false,
      goodsindex: 0,
      goodsrows: [],
      deletegoodsflag: false,
      holder: '请输入内容',
      loading: true, //
      pagesize: 5, // 每页条数
      total: 0, // 总条目数
      content: '',
      tableData: []
      // options: [{
      //   value: 'num',
      //   label: '出库单号'
      // }, {
      //   value: 'number',
      //   label: '产品编号'
      // }, {
      //   value: 'all',
      //   label: '全部'
      // }],
      // value: ''
    }
  },
  computed: {
    // 计算属性
  },
  watch: {
    value(v, i) {
      if (v == 'all') {
        this.handleGoods(1)
      }
      switch (v) {
        case 'name':
          this.holder = '请输入企业名称'
          break
        case 'number':
          this.holder = '请输入企业编号'
          break
        case 'phone':
          this.holder = '请输入用户电话'
          break
      }
    }
  },
  created() {

  },
  mounted() {
    // 生命周期
    this.handleGoods(1)
  },
  methods: {
    deletegoods(index, rows, val) {
      this.goodsindex = index
      this.goodsrows = val.row
      this.deletegoodsflag = true
    },
    DetermineGoods() {
      this.$apifn.DeleteoutBounds({ 'id': this.goodsrows.id }).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.tableData.splice(this.goodsindex, 1)
          this.deletegoodsflag = false
          this.$message({
            message: '成功删除该出库单',
            type: 'success'
          })
        }
      }).catch((res) => {
      })
    },
    handleCurrentChange(val) { // 分页
      this.loading = true
      this.handleGoods(val)
    },
    handfreezing(val) { // 启用商品
      this.$apifn.FrozenGoods({ 'id': val.row.id }).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.tableData.forEach((item) => {
            if (item.id == val.row.id) {
              item.status = ref.data.Response.data.status
            }
          })
        }
      }).catch((res) => {
      })
    },
    addsite() { // 新增企业
      this.piciflag = true
    },
    handleEdit(val) { // 编辑 查看详情
      this.formchuku = val.row // 出库Object
      this.chukuflag = true
    },
    Addchuku(formName) {
      const arrfn = {
        num: this.formchuku.num,
        number: this.formchuku.number,
        remark: this.formchuku.remark
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            'id': this.formchuku.id,
            'upload': arrfn
          }
          this.$apifn.EditoutBounds(data).then((ref) => {
            if (ref.data.Response.code == 200) {
              this.chukuflag = false
              this.$message({
                message: '修改出库单成功',
                type: 'success'
              })
            }
          }).catch((res) => {
          })
        } else {
          return false
        }
      })
    },
    handleGoods(e) { // 查看商品
      this.$apifn.ShowoutBounds({ 'limit': this.pagesize }, e).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.tableData = ref.data.Response.data.data
          this.total = ref.data.Response.data.total
          this.loading = false
        }
      }).catch((res) => {

      })
    },
    onSubmit() { // 搜索企业
      this.loading = true
      // if(this.value == ''){
      //   this.$notify({
      //     title: '警告',
      //     message: '请选择搜索类型',
      //     type: 'warning'
      //   });
      //   return false;
      // }
      if (this.content == '') {
        this.$notify({
          title: '警告',
          message: '请输入搜索内容',
          type: 'warning'
        })
        return false
      }
      this.$apifn.SearchoutBounds({ 'type': 'num', 'val': this.content }).then((ref) => {
        if (ref.data.Response.code == 200) {
          // console.log(ref.data);
          this.tableData = ref.data.Response.data
          this.total = 0
          this.loading = false
        }
      }).catch((res) => {
      })
    }
  }
}
</script>
<style scoped>
  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }
  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      height: 147px;

    }

    .add_zhandian {
      width: 100%;
      height: 54px;
    }

    .selech {
      width: 100%;
      height: 50px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 50px;
    }

    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }

    .selech {
      width: 79%;
      height: 100%;
      float: right;

    }
  }
</style>
